// ---------- FOOTER ----------
.footer {

  // ---------- FOOTER-TOP-LINE
  &__top-line {
    position: relative;

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 142px;
      margin-top: 0;
      margin-bottom: 0;

      .footer__title {


        .common-title-s {
          font-family: 'Martel', sans-serif;
          color: #ffffff;
        }
      }

      .footer__social-buttons {
        img {
          margin-right: 20px;
        }
      }
    }


  }

  // ---------- FOOTER-MIDDLE-LINE
  &__middle-line {
    .content {
      margin-top: 0;
      margin-bottom: 0;
      display: flex;
      justify-content: space-between;


      ul, li {
        font-family: 'Open Sans', sans-serif;
        color: #BDBDBD;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.2px;
        margin: 20px 0;
        min-width: 140px      }

      .footer__info-block {
        display: flex;
        align-items: center;
        width: 80%;
        justify-content: space-between;
        margin-bottom: 35px;


        .info-block__company,
        .info-block__features,
        .info-block__legal,
        .info-block__resources {
          min-width: 140px;
          width: 25%;
        }

        .common-title-xs {
          font-family: 'Martel', sans-serif;
          color: #ffffff;
        }
      }

      .footer__subscribe-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;

        div {
          display: flex;
          justify-content: start;
          width: 100%;

          .common-title-xs {
            font-family: 'Martel', sans-serif;
            color: #ffffff;
            margin-bottom: 10px;
          }
        }

          label {
            position: relative;
            height: 60px;
            width: 326px;

            input.subscribe-area {
              background: #F9F9F9;
              border: 1px solid #E6E6E6;
              border-radius: 5px 0 0 5px;
              width: 204px;
              height: 54px;
            }

            .subscribe-button {
              position: absolute;
              right: 0;
              background: #D0A144;
              border: 1px solid #E6E6E6;
              border-radius: 0 5px 5px 0;
              width: 117px;
              height: 58px;
            }

            .subscribe-button:hover,
            .subscribe-button:active {
              transform: none;
            }

          }

        .footer__lorem-text {
          color: #BDBDBD;
          font-family: 'Montserrat', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 28px;
          letter-spacing: 0.2px;
        }
        }
      }
    }


  // ---------- FOOTER-BOTTOM-LINE
  &__bottom-line {
    .content {
      display: flex;
      align-items: center;
      margin-top: 0;
      margin-bottom: 0;
      height: 80px;

      .common-text {
        font-family: 'Open Sans', sans-serif;
        color: #ffffff;
      }
    }
  }
}

// ---------- FOOTER-MEDIA ----------
@media (max-width: 1500px) {
  .footer {
    .content {
      padding: 0 15px;
    }
  }
}

@media (max-width: 1380px) {
  .footer__middle-line .content .footer__info-block {
    height: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;

    ul, li {
      min-width: 100px ;
    }
  }
}

@media (max-width: 1030px) {
  .footer__middle-line .content {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer__middle-line .content .footer__subscribe-form {
    align-items: center;
  }
}

@media (max-width: 700px) {
  .footer__bottom-line .content {
    display: flex;
    justify-content: center;

    .common-text {
      text-align: center;
      max-width: 209px;
    }
  }
}

@media (max-width: 501px) {
  .footer__top-line .content {
    justify-content: space-evenly;
    height: 212px;
    flex-direction: column;
    align-items: center;
  }

  .footer__top-line .content .footer__social-buttons img {
    margin: 10px;
  }

  .footer__middle-line .content .footer__info-block ul,
  .footer__middle-line .content .footer__info-block li {
    min-width: 100px;
    text-align: center;

  }
}
